<template>
  <view class="category-icon" :class="iconName">
    <!-- 全部 -->
    <view v-if="iconName === 'all'" class="icon-all">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 13H11V3H3V13ZM3 21H11V15H3V21ZM13 21H21V11H13V21ZM13 3V9H21V3H13Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 社交 -->
    <view v-else-if="iconName === 'social'" class="icon-social">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 12.75C13.63 12.75 15.07 13.14 16.24 13.65C17.32 14.13 18 15.21 18 16.38V18H6V16.39C6 15.21 6.68 14.13 7.76 13.66C8.93 13.14 10.37 12.75 12 12.75ZM4 13C5.1 13 6 12.1 6 11C6 9.9 5.1 9 4 9C2.9 9 2 9.9 2 11C2 12.1 2.9 13 4 13ZM5.13 14.1C4.76 14.04 4.39 14 4 14C3.01 14 2.07 14.21 1.22 14.58C0.48 14.9 0 15.62 0 16.43V18H4.5V16.39C4.5 15.56 4.73 14.78 5.13 14.1ZM20 13C21.1 13 22 12.1 22 11C22 9.9 21.1 9 20 9C18.9 9 18 9.9 18 11C18 12.1 18.9 13 20 13ZM24 16.43C24 15.62 23.52 14.9 22.78 14.58C21.93 14.21 20.99 14 20 14C19.61 14 19.24 14.04 18.87 14.1C19.27 14.78 19.5 15.56 19.5 16.39V18H24V16.43ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 金融 -->
    <view v-else-if="iconName === 'finance'" class="icon-finance">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11.8 10.9C9.53 10.31 8.8 9.7 8.8 8.75C8.8 7.66 9.81 6.9 11.5 6.9C13.28 6.9 13.94 7.75 14 9H16.21C16.14 7.28 15.09 5.7 13 5.19V3H10V5.16C8.06 5.58 6.5 6.84 6.5 8.77C6.5 11.08 8.41 12.23 11.2 12.9C13.7 13.5 14.2 14.38 14.2 15.31C14.2 16 13.71 17.1 11.5 17.1C9.44 17.1 8.63 16.18 8.5 15H6.32C6.46 17.19 8.08 18.42 10 18.83V21H13V18.85C14.95 18.48 16.5 17.35 16.5 15.3C16.5 12.46 14.07 11.49 11.8 10.9Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 游戏 -->
    <view v-else-if="iconName === 'game'" class="icon-game">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 6H3C1.9 6 1 6.9 1 8V16C1 17.1 1.9 18 3 18H21C22.1 18 23 17.1 23 16V8C23 6.9 22.1 6 21 6ZM10 13H8V15H6V13H4V11H6V9H8V11H10V13ZM15 15H13V13H15V15ZM15 11H13V9H15V11ZM19 15H17V13H19V15ZM19 11H17V9H19V11Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 娱乐 -->
    <view v-else-if="iconName === 'entertainment'" class="icon-entertainment">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 3V5H16V3H8V5H6V3H4V21H6V19H8V21H16V19H18V21H20V3H18ZM8 17H6V15H8V17ZM8 13H6V11H8V13ZM8 9H6V7H8V9ZM18 17H16V15H18V17ZM18 13H16V11H18V13ZM18 9H16V7H18V9Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 学习 -->
    <view v-else-if="iconName === 'education'" class="icon-education">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3ZM18.82 9L12 12.72L5.18 9L12 5.28L18.82 9ZM17 15.99L12 18.72L7 15.99V12.27L12 15L17 12.27V15.99Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 工作 -->
    <view v-else-if="iconName === 'work'" class="icon-work">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 16V15H3.01L3 19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V15H14V16H10ZM20 7H16V5L14 3H10L8 5V7H4C2.9 7 2 7.9 2 9V12C2 13.11 2.89 14 4 14H10V12H14V14H20C21.1 14 22 13.1 22 12V9C22 7.9 21.1 7 20 7ZM14 7H10V5H14V7Z" fill="currentColor"/>
      </svg>
    </view>
    
    <!-- 其他 -->
    <view v-else class="icon-other">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 17H14V15H16V13H14V11H12V13H10V15H12V17ZM7 9H17V7H7V9Z" fill="currentColor"/>
      </svg>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CategoryIcon',
  props: {
    iconName: {
      type: String,
      default: 'other',
      validator: (value) => {
        return ['all', 'social', 'finance', 'game', 'entertainment', 'education', 'work', 'other'].includes(value)
      }
    }
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  
  svg {
    width: 16px;
    height: 16px;
  }
  
  &.all {
    background-color: #5E81F4;
  }
  
  &.social {
    background-color: #FF5252;
  }
  
  &.finance {
    background-color: #4CAF50;
  }
  
  &.game {
    background-color: #9C27B0;
  }
  
  &.entertainment {
    background-color: #FF9800;
  }
  
  &.education {
    background-color: #03A9F4;
  }
  
  &.work {
    background-color: #795548;
  }
  
  &.other {
    background-color: #607D8B;
  }
}
</style>